<template>
    <div class="xhl-topbar-search">
        <div class="search-group">
  <div class="typeGroup">
    <el-checkbox v-model="batchCheck" @change="handleCheckboxChange">
      <span class="el-checkbox__label">按批次统计</span>
    </el-checkbox>
    <el-checkbox v-model="warehouseCheck" @change="handleCheckboxChange">
      <span class="el-checkbox__label">按仓库统计</span>
    </el-checkbox>
  </div>
  <div class="xhl-search-multiple" style="width: 320px;">
    
    <el-input
      v-model="searchValue"
      class="el-input--small"
      placeholder="请选择"
      @change="handleInputChange"
    >
      <el-select
        v-model="selectedOption"
        slot="prepend"
        class="el-input--small"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          {{ item.label }}
        </el-option>
      </el-select>
      <el-input
        v-model="searchQuery"
        class="el-input__inner"
        placeholder="搜索内容"
      />
      <i class="search-icon el-icon-search"></i>
      <button class="reset" @click="resetSearch">重置</button>
    </el-input>
   
  </div>
</div>

        
      </div>
      <div class="xhl-topbar-operate flexBetweenCenter">
        <div class="leftBox">
          <button type="button" class="el-button el-button--default el-button--small is-plain">
            <span>入库</span>
          </button>
          <button type="button" class="el-button el-button--default el-button--small is-plain">
            <span>派发</span>
          </button>
        </div>
      
        <div class="rightBox">
          <el-tooltip class="refresh" effect="dark" content="刷新" placement="top">
            <i class="iconfont icon-refresh" style="font-size: 16px;"></i>
          </el-tooltip>
        </div>
        <button class="export" @click="exportToCSV">导出</button>
      </div>
 
    
  </template>
  
  <style>

  .flexBetweenCenter {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  </style>
  
  <script>
 
  
  export default {

  
    methods: {
      resetSearch() {
 
        this.searchQuery = '';
  
      },
      exportToCSV() {
      
        const csvContent = "data:text/csv;charset=utf-8,\\n" +
          "列名1,列名2,列名3\\n" +
          "值1,值2,值3\\n"; // 
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "export.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
    },
  };
  </script>
  <style>

.search-group {
  display: flex;
  align-items: center;
}

.typeGroup,
.xhl-search-multiple {
  margin-right: 20px; 
}


</style>